﻿<!DOCTYPE html>
<html>
<head>
    <title>React</title>
    <script src="../Resource/JS/jquery-1.10.2.js"></script>
    <script src="react.js"></script>
    <script src="JSXTransformer.js"></script>
    <script src="d3.js"></script>
</head>
<body>
    <svg id="svg" width="1000" height="1000"  fill="#fff" stroke="#000" stroke-width="2" style="top: 0px; left: 0px; position: absolute; float: left;">
        <!--<marker id="idArrow" viewBox="0 0 120 50" rx="0" ry="10">
            <path d="M 0 0 L 20 10 L0 20 z" fill="purple"></path>
        </marker>-->
    </svg>
    <svg width="1000" height="1000" style="top: 0px; left: 0px; position: absolute; float: left;" id="svg1"></svg>
</body>
</html>
<script type="text/jsx">
    //http://facebook.github.io/react/docs/top-level-api.html
    var svg = d3.select("svg");

        var RenderSvg = React.createClass({
            getInitialState: function() {
                return {lines: [],rects:[]};
            },
            getDataFromServer:function(){
                $.ajax({
                    url: this.props.url,
                    dataType: 'xml',
                    success: function(data) {
                        var res = $(data);
                        var lines = [];
                        var rects = [];
                        
                        res.find("link").each(function () {
                            lines.push({ points: eval("(" + $(this).attr("points") + ")") });
                        })
                        res.find("extensionActivity").each(function () {
                            //rects.push({ x: $(this).attr("x"), y: $(this).attr("y"), w: $(this).attr("width"), h: $(this).attr("height") });
                        })
                        res.find("empty").each(function () {
                            //rects.push({ x: $(this).attr("x"), y: $(this).attr("y"), w: $(this).attr("width"), h: $(this).attr("height") });
                        })
                        res.find("scope").each(function () {
                            rects.push({ x: $(this).attr("x"), y: $(this).attr("y"), w: $(this).attr("width"), h: $(this).attr("height") });
                        })
                        res.find("compensationHandler").each(function () {
                            rects.push({ x: $(this).attr("x"), y: $(this).attr("y"), w: $(this).attr("width"), h: $(this).attr("height") });
                        })
                        res.find("faultHandlers").each(function () {
                            rects.push({ x: $(this).attr("x"), y: $(this).attr("y"), w: $(this).attr("width"), h: $(this).attr("height") });
                        })
                        res.find("Scope1").each(function () {
                            rects.push({ x: $(this).attr("x"), y: $(this).attr("y"), w: $(this).attr("width"), h: $(this).attr("height") });
                        })
                        this.setState({lines: lines,rects:rects});
                    }.bind(this),
                    error: function(xhr, status, err) {
                        console.error(this.props.url, status, err.toString());
                   }.bind(this)
                });
            },
            //before render function
            componentDidMount: function() {
                setTimeout(this.getDataFromServer, 100);
            },
            render:function(){
                var nodes = [];
                //nodes.push(Marker());
                
                this.state.rects.forEach(function(rect){
                    nodes.push(<Rect rect={rect} />);
                })
                this.state.lines.forEach(function(line){
                    nodes.push(<Line line={line} />);
                })
                return <g>{nodes}</g>
            }
        });

    var Marker =  React.createClass({
        render:function(){
            return <div></div>
                //(<marker id="idArrow" viewBox="0 0 20 20" rx="0" ry="10">
                 //          <path d="M 0 0 L 20 10 L0 20 z"></path>
                  //      </marker>)
            //<defs dangerouslySetInnerHTML={{__html: <marker id="idArrow" viewBox="0 0 20 20" refX="0" refY="10" markerUnits="strokeWidth" markerWidth="3" markerHeight="10" orient="auto"><path d="M 0 0 L 20 10 L0 20 z" fill="purple" stroke="black"></path></marker>}} ></defs>
        }
    })
    
    var Rect = React.createClass({
        handleClick:function(){
            alert("Rect position is: x:" + this.props.rect.x +",y:"+this.props.rect.y);
        },
        render:function(){
            return <rect x={this.props.rect.x} y={this.props.rect.y} width={this.props.rect.w} height={this.props.rect.h} rx="7.5" ry="7.5" onClick={this.handleClick}></rect>
        }
    })

    var Line = React.createClass({
        convertPoints:function(points){
            var res = "";
            if (points && points.length != 0) {
                for (var i = 0; i < points.length; i++) {
                    res += points[i].toString() + " ";
                }
                res = res.substring(0, res.length - 1);
            }
            else {
                res = "";
            }
            return res;
        },
        render:function(){
            return (<polyline points={this.convertPoints(this.props.line.points)} strokeWidth="2" stroke="black" markerEnd="url(#idArrow)"></polyline>);
        }
    })
    
    var Img = React.createClass({
        //render function
        render:function(){
            var res = "<image  x={"+this.props.img.x+"} y={"+this.props.img.y+"} width='50' height='50' fill='#90' stroke='#000' style='cursor:pointer' xlink:href=" + this.props.img.src + "/>";
            return <g dangerouslySetInnerHTML={{__html: res}} />
        }
    })

    var tempImgs="";
    var xmlPath = "SVG02.xml";
    function renderImg(){
       $.ajax({
            url: xmlPath,
            dataType: 'xml',
            success: function(data) {
                var res = $(data);
                var imgs = [];
                res.find("extensionActivity").each(function () {
                    imgs.push({ x: $(this).attr("x"), y: $(this).attr("y"), w: $(this).attr("width"), h: $(this).attr("height") });
                })
                res.find("empty").each(function () {
                    imgs.push({ x: $(this).attr("x"), y: $(this).attr("y"), w: $(this).attr("width"), h: $(this).attr("height") });
                })
                var _imgRes = "";
                
                for(var i =0;i<imgs.length;i++)
                {
                    _imgRes += "<image  x='"+imgs[i].x+"' y='"+imgs[i].y+"' width='"+imgs[i].w+"' height='"+imgs[i].h+"' fill='black' stroke='#000'  xlink:href='1.png' />";
                }
                //tempImgs = "<g id='g_image'>"+_imgRes+"</g>"
                React.render(<g id='g_image' dangerouslySetInnerHTML={{__html: _imgRes}} />,document.getElementById("svg1"));
            }
        });
    }

    var imgs = [{x:100,y:100,w:50,h:50,src:'1.png'},{x:200,y:100,w:50,h:50,src:'1.png'}];
    React.render(<RenderSvg url={xmlPath} />, document.getElementById("svg"));
    renderImg();
</script>
